<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <span class="title-text">酒钢翻车机数据监控</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 第二行 -->
        <!-- <div class="d-flex jc-between px-2">
          <div style="width: 40%" class="d-flex">
            <div
              class="react-left mr-4"
              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
            >
              <span class="react-after"></span>
              <span class="text">2020年03月16日 周一 12:00</span>
            </div>
          </div>
        </div> -->
		<Row>
		  <Col>
		    <Select
		      v-model="proid"
		      placeholder="请选择项目"
		      filterable
		      clearable
		      @on-change="searchEqu()"
		      @on-select="isSelect"
		    >
		      <Option v-for="item in prolist" :value="item.id"
		        >{{ item.proName }}
		      </Option>
		    </Select>
		  </Col>
		  <Col offset="1">
		    <Select
		      v-model="equId"
		      placeholder="请选择设备"
		      filterable
		      clearable
		      on
		      @on-change="searchIt"
		      :disabled="isSelectBoolean"
		    >
		      <Option v-for="item in equlist" :value="item.id"
		        >{{ item.equipmentName }}
		      </Option>
		    </Select>
		  </Col>
		  <Col span="2" push="1">
		    <Button
		      class="m-2 w-75 search-btn"
		      type="primary"
		      shape="circle"
		      icon="ios-search"
		      @click="search()"
		      >查询</Button
		    >
		  </Col>
		</Row>
        <div class="content-box1">
          <div>
            <dv-border-box-12>
             <p v-model="addPro" style="height: 0.725rem;color:white;position: relative;top: 0.1rem;left:1rem;font-size: 0.2rem;">
               项目描述:{{ addPro.pro.proName }}&nbsp&nbsp{{ addPro.pro.proInfo }}
             </p>
            </dv-border-box-12>
          </div>
		</div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
               <Table
                 size="small"
				 disabled-hover
                 height="420px"
                 :columns="table1.columnInfo"
                 :data="table1.data"
               ></Table>
              </dv-border-box-12>
            </div>
            <div>
              <dv-border-box-12>
                  
              </dv-border-box-12>
            </div>
            <div >
              <dv-border-box-12 >
				  	<Table
				  	  size="small"
					  disabled-hover
					  height="432px"
				  	  :columns="table2.columnInfo"
				  	  :data="table2.data"
				  	></Table>
              </dv-border-box-12>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-12>
             <Table
               size="small"
               disabled-hover
               height="420px"
               :columns="table3.columnInfo"
               :data="table3.data"
             ></Table>
            </dv-border-box-12>
            <dv-border-box-12>
              <div id="line" style="width:10.5rem; height: 440px"></div>
            </dv-border-box-12>
			<dv-border-box-12>
			 <Table
			   size="small"
			   disabled-hover
			   height="430px"
			   :columns="table4.columnInfo"
			   :data="table4.data"
			 ></Table>
			</dv-border-box-12>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/dataZoom')
require('echarts/lib/component/legend')
require('echarts/lib/chart/line')
export default {
  data() {
    return {
	  loading: true,
      proInfo: {},
      isSelectBoolean: true,
      equId: '',
      proid: '',
      prolist: [],
      equlist: [],
      id: '',
      table1: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '报警内容',
            key: 'type',
          },
          {
            title: '报警类型',
            key: 'bjxx',
          },
          {
            title: '报警时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table2: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '挂钩状态',
            key: 'ggzt',
          },
          {
            title: 'AI识别信号',
            key: 'aixbxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table3: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '压车臂1#信号',
            key: 'ycbxh1',
          },
          {
            title: '压车臂2#信号',
            key: 'ycbxh2',
          },
          {
            title: '压车臂3#信号',
            key: 'ycbxh3',
          },
          {
            title: '压车臂4#信号',
            key: 'ycbxh4',
          },
          {
            title: '数据时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      table4: {
        size: 10,
        total: 0,
        pageSize: 0, // 默认一页十条
        columnInfo: [
          {
            title: '轨道状态',
            key: 'dgzt',
          },
          {
            title: '翻转角度',
            key: 'fzjd',
          },
          {
            title: '对轨激光信号',
            key: 'dgjgxh',
          },
          {
            title: '时间',
            key: 'sjsj',
          },
        ],
        data: [],
      },
      echarts: {
        xAxis: '',
        data: '',
      },
      addPro: {
        pro: {
          proName: '',
          proInfo: '',
          proAddr: '',
          proLead: '',
          leadTel: '',
          statu: 1,
          datetime: '',
        },
        equIdsStr: '',
      },
    }
  },
  methods: {
    isSelect: function() {
      this.isSelectBoolean = false
    },
    searchIt: function() {
      this.search()
    },
    searchpro: function() {
      let self = this
      this.http
        .get({
          url: '/pro/list',
        })
        .then((data) => {
          this.prolist = data
        })
    },
    searchPro1: function() {
      this.http
        .get({
          url: `/pro/${this.proid}`,
        })
        .then((data) => {
          this.addPro.pro = data
        })
    },
    searchEqu: function() {
      this.searchProInfo()
      this.http
        .get({
          url: `/pro_equ_ref/list/${this.proid}`,
        })
        .then((data) => {
          this.equlist = data
        })
      this.searchPro1()
    },
    searchProInfo: function() {
      this.http
        .get({
          url: `/pro/${this.proid}`,
        })
        .then((data) => {
          this.proInfo = data
        })
    },
    search: function() {
	  var timer1 = setInterval( this.drawLine(), 300000)
      var timer = null
      clearInterval(timer)
      timer = setInterval(() => {
        if (this.$data.equId == undefined || this.$data.proid == undefined) {	
          clearInterval(timer)
        } else {
      this.http
        .get({
          url: '/alert/list',
          param: { id: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              type: data.type,
              bjxx: data.bjxx,
              sjsj: data.sjsj,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table1.data = POJOList
        })

      //车钩智能分析
      this.http
        .get({
          url: '/monitor/hookStatu/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              ggzt: data.ggzt,
              aixbxh: data.aisbxh,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table2.data = POJOList
        })

      //压车臂状态
      this.http
        .get({
          url: '/monitor/pressArm/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              ycbxh1: data.ycbxh1,
              ycbxh2: data.ycbxh2,
              ycbxh3: data.ycbxh3,
              ycbxh4: data.ycbxh4,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table3.data = POJOList
        })

      //轨道状态分析
      this.http
        .get({
          url: '/monitor/trackStatu/list',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          var POJOList = []
          data.forEach((data) => {
            let POJO = {
              // id:data.id,
              tableId: data.tableId,
              id: data.id,
              dgzt: data.dgzt,
              fzjd: data.fzjd,
              dgjgxh: data.dgjgxh,
              sjsj: data.sjsj,
              datetime: data.datetime,
            }
            POJOList.unshift(POJO)
            if (POJOList.length > 10) {
              POJOList.pop()
            }
            return POJOList
          })
          this.$data.table4.data = POJOList
        })
      }
      }, 5000)
      
    },
    drawLine() {

	if (this.$data.equId == undefined || this.$data.proid == undefined) {
	  console.log("1")
	} else {	
      this.http
        .get({
          url: '/alert/statistics',
          param: { equipmentId: this.equId },
        })
        .then((data) => {
          // 基于准备好的dom，初始化echarts实例
          let myChart = echarts.init(document.getElementById('line'))
          // 绘制图表
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
            },
            lineStyle: { color: '#ff0000' },
            dataZoom: {
              show: true,
              realtime: true,
              y: 16,
              height: 30,
              start: 0,
              end: 40,
            },
            xAxis: {
              axisLabel: {
                interval: 0, //横轴信息全部显示
              },
              type: 'category',
              boundaryGap: false,
              data: data.xAxis,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                data: data.data,
                type: 'line',
              },
            ],
          })
        })
		}
    },
	cancelLoading() {
	  setTimeout(() => {
	    this.loading = false;
	  }, 500);
	}
  },
  mounted() {
	this.cancelLoading();
    this.drawLine()
  },
  created() {
    this.search()
    this.searchpro()
  },
}
</script>

<style lang="scss">
@import "../src/assets/scss/index.scss";

</style>
<style>
	/* #project_list_card{
 		width: 6.375rem; 
		height: 5.28rem;
		border-radius: 0.125rem;
		overflow: hidden;
	} */
	.ivu-table {
		/* padding-top: 10px; */
		position: relative;
		top: 0.2rem;
		left: 0.1rem;
		overflow: hidden;
		border-radius: 0.125rem;
		width: 6.3rem;
		height: 7rem;
	}
	.ivu-table td{
		/* background-color: #000a18; */
		background-image: url(../src/assets/pageBg.png);
	}
	.ivu-table-header th{
			background: #000a18;
		}
	.ivu-table-body td{
			  background: #000a18;
			  border: #000000;
		}
	 .ivu-table-body span {
		  color: white;
		
		}
</style>

